<template>
	<view>

		<view class="checkHead_con">
			{{userInfo.name}},{{projectInfo.name}}工地明细单
		</view>

		<form @submit="formSubmit">
			<view class="handleList_box">
				<view class="handleList_con">
					<view class="handleLabel handleLabelMedium">姓名：</view>
					<view class="handleList">
						<view class="pickerCon">
							<input type="text" name="name" :value="signUserInfo.name" @input="nameInto"
								placeholder="请输入姓名" placeholder-class="placeholderColor">
							<!-- <u-icon name="arrow-right" color="#B3B3B3" size="28"></u-icon> -->
						</view>
					</view>
				</view>
				<view class="handleList_con">
					<view class="handleLabel handleLabelMedium">身份证：</view>
					<view class="handleList">
						<view class="pickerCon">
							<input type="idcard" name="id_card" :value="signUserInfo.id_card" @input="cardInto"
								placeholder="请输入身份证号" placeholder-class="placeholderColor">
							<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
								class="getMobile">{{mobile ? '修改':'授权获取'}}</button> -->
						</view>
					</view>
				</view>
				<!-- @click="openProfession" -->
				<view class="notice">
					<u-icon name="warning" color="#2979ff" size="32"></u-icon>
					请填写对方的电话和身份证号，如果您是带班，则填写工人的信息，如果你是工人，则填写代表的信息
				</view>
			</view>

			<!-- 间隔槽 -->
			<u-gap height="20" bg-color="#F5F5F5"></u-gap>
			<view class="tableOutBox">
				<view class="tableInBox">
					<view class="tableTr">
						<view class="tableTd">月份</view>
						<view class="tableTd">点工</view>
						<view class="tableTd">总工资</view>
						<view class="tableTd">借支</view>
						<view class="tableTd">签字状态</view>
					</view>
					
					<view class="tableTr" v-for="(item,index) in monthData" :key="index"
						v-if="item.month_num>0 || item.overtime_hour>0 || item.month_borrow>0 || item.month_money>0">
						<view class="tableTd" @click="toSign(item.member_id,item.project_id)">{{item.month}}</view>
						<view class="tableTd"  @click="toSign(item.member_id,item.project_id)">
							{{item.month_num}}工{{item.overtime_hour>0?'+'+item.overtime_hour+'H':''}}
						</view>
						<view  class="tableTd" @click="toSign(item.member_id,item.project_id)">{{item.month_money}}</view>
						<view  class="tableTd" @click="toSign(item.member_id,item.project_id)">{{item.month_borrow}}</view>
						<view  class="tableTd" @click="toSign(item.member_id,item.project_id)">{{item.sign_str}}</view>
					</view>
				</view>
			</view>
			

			<!-- 底部操作 -->
			<view class="handlePost_con handleFixed">
				<button hover-class="none" class="completeBtn" @click="lookExcel">预览结算单</button>
				<button hover-class="none" class="completeBtn" @click="printFile">打印结算单</button>
				<button hover-class="none" class="completeBtn" @click="signExcel">在线签字</button>
			</view>
		</form>

		<!-- 系统提示弹窗 -->
		<u-popup v-model="customShow" mode="center" width="600" border-radius="20" :mask-close-able="false" closeable
			close-icon-size="40" duration="0" @close="customShow = false">
			<view class="materialCustom_box">
				<view class="customTit">拒绝理由</view>
				<view class="customInput">
					<view class="customTips">检测到有双方没有签字的月份，无法 提供决算单。</view>
					<view class="customTips">请双方把每月都签字，系统会自动生 成结算单。</view>
				</view>
				<view class="handlePost_con">
					<view class="cancelBtn" @click="customShow = false">取 消</view>
					<view class="completeBtn" @click="customSubmit">确 定</view>
				</view>
			</view>
		</u-popup>

		<!-- 工种 -->
		<profession ref="profession"></profession>

	</view>
</template>

<script>
	import profession from '@/components/profession/profession.vue';
	export default {
		components: {
			profession
		},
		data() {
			return {
				// 表单
				formData: {},
				mobile: '',

				// 工种
				profession: '',

				// 系统提示弹窗
				customShow: false,

				// 文件链接
				excelUrl: '',
				downFileUrl: '',

				userInfo: {
					name: '',
					id_card: ""
				},
				signUserInfo: {
					name: '',
					id_card: '',
				},
				projectInfo: {},
				memberId: 0,
				monthData: [],

				// 签名
				signatureForeman: {
					imgID: '',
					path: '',
					url: '',
				},
				signatureWorker: {
					imgID: '',
					path: '',
					url: '',
				},
			}
		},
		onLoad(e) {
			// 这个地方不能走缓存工地中取得--要考虑到分享
			this.project_id = e.project_id;
			this.memberId = e.member_id;
			this.role = e.role;
		},
		onShow() {
			var _this = this;
			// 获取签名
			uni.$on('signWorker', function(data) {
				console.log("==获取工人的签名==");
				console.log(data);
				_this.signatureWorker = data;
				
				_this.excelUrl = _this.$baseURL + '/api/project.monthdata/signPdf?member_id=' + _this.memberId + '&name=' +
					_this.signUserInfo.name + '&idcard=' + _this.signUserInfo.id_card + '&sign=' + _this.signatureWorker.imgID;
					
				_this.signExcel()
			})
			

			_this.excelUrl = _this.$baseURL + '/api/project.monthdata/signPdf?member_id=' + _this.memberId + '&name=' +
				_this.signUserInfo.name + '&idcard=' + _this.signUserInfo.id_card + '&sign=' + _this.signatureWorker.imgID;
			console.log(_this.excelUrl);
			_this.$forceUpdate();
		},
		onReady() {
			var _this = this;
			// _this.getUserInfo();
			_this.getMonthData();
			_this.getFile();
		},
		methods: {
			// 获取姓名
			nameInto(e) {
				// console.log(e.detail.value);
				this.signUserInfo.name = e.detail.value;
			},

			// 获取身份证
			cardInto(e) {
				// console.log(e.detail.value);
				this.signUserInfo.id_card = e.detail.value;
			},

			// 签名
			signClick(role) {
				// uni.navigateTo({
				// 	url: '/pages/signature/signature?role=' + role
				// })
				var url = '/pages/wage/wageHome?member_id=' + memberId + '&project_id=' + projectId;
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},

			// 跳转到对工签字的页面
			toSign(memberId, projectId) {
				var url = '/pages/wage/wageHome?member_id=' + memberId + '&project_id=' + projectId;
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},

			// 获取文件
			getFile() {
				var _this = this;
				uni.downloadFile({
					url: _this.excelUrl, // 下载url
					success(res) {
						_this.downFileUrl = res.tempFilePath;
					}
				})
			},

			// 在线签字
			signExcel() {
				var _this = this;
				if (!_this.signUserInfo.name) {
					uni.showModal({
						content: '姓名不能为空',
						showCancel: false,
					})
					return;
				}

				if (!_this.signUserInfo.id_card) {
					uni.showModal({
						content: '身份证号不能为空',
						showCancel: false,
					})
					return;
				}

				if (!_this.signatureWorker.path) {
					uni.navigateTo({
						url: '/pages/signature/signature?role=1'
					})
					return;
				}
				
				uni.downloadFile({
					url: _this.excelUrl, // 下载url
					success(res) {
						_this.downFileUrl = res.tempFilePath;
						uni.openDocument({
							filePath: _this.downFileUrl,
							success: function(res) {
								console.log('打开文档成功')
							}
						})
					}
				})
			},

			// 打印
			printFile() {
				var _this = this;
				uni.downloadFile({
					url: _this.downFileUrl, // 下载url
					success(resUrl) {
						console.log('文件开始下载')
						console.log(resUrl.tempFilePath)
						_this.downFileUrl = resUrl.tempFilePath;

						uni.shareFileMessage({
							filePath: _this.downFileUrl,
							fileName: '工地结算单',
							success() {},
							fail: console.error,
						})
					}
				})
			},
			/**
			 * 点击预览
			 */
			lookExcel() {
				var _this = this;
				uni.openDocument({
					filePath: _this.downFileUrl,
					success: function(res) {
						console.log('打开文档成功')
					}
				})
			},

			// 获取用户信息
			getMonthData() {
				var _this = this;
				_this.$u.get('/api/project.monthdata/memberSignWork', {
					member_id: _this.memberId
				}).then(res => {
					uni.hideLoading();
					_this.userInfo = res.extend.userInfo;
					_this.projectInfo = res.extend.projectInfo;
					_this.monthData = res.data;

				}).catch(res => {
					console.log(res);
				})
			},

			// 获取手机号
			getPhoneNumber(e) {
				var _this = this;
				_this.$u.post('/api/plus.weixin/getWxMobile', e.detail).then(res => {
					console.log("==获取手机号结果==");
					console.log(res.data.phoneNumber);
					_this.mobile = res.data.phoneNumber;
					_this.$forceUpdate();
				}).catch((res) => {
					console.log(res);
				})
			},

			// 打开工种弹出框
			openProfession() {
				this.$refs.profession.addShow = true;
			},

			// 提交
			formSubmit(e) {
				// console.log(e);
				var _this = this;
				var formData = e.detail.value;

				// if (!_this.avatarId) {
				// 	uni.showModal({
				// 		content: '请上传头像',
				// 		showCancel: false,
				// 	})
				// 	return;
				// }

				if (!formData.name) {
					uni.showModal({
						content: '姓名不能为空',
						showCancel: false,
					})
					return;
				}

				if (!formData.mobile) {
					uni.showModal({
						content: '电话不能为空',
						showCancel: false,
					})
					return;
				} else {
					var testMobile = _this.$u.test.mobile(formData.mobile);
					// console.log(testMobile)
					if (testMobile == false) {
						uni.showModal({
							content: '你输入的电话格式不正确',
							showCancel: false,
						})
						return;
					}
				}
				_this.formData = formData;
				_this.$u.throttle(_this.submitForm, 3000);
			},

			// 提交接口
			submitForm() {
				var _this = this;
				_this.$u.post('/api/user.index/add_do', {
					header_img: _this.avatarId,
					name: _this.formData.name,
					mobile: _this.formData.mobile,
					profession: _this.profession,
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.checkHead_con {
		padding: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
	}

	.pickerCon {
		position: relative;
	}

	.getMobile {
		width: 130rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: $uni-color-active;
		background: #f0f6ff;
		border: 2rpx solid #cce0ff;
		box-sizing: border-box;
		border-radius: 10rpx;
		overflow: hidden;
		position: absolute;
		right: 20rpx;
		top: 15rpx;
		z-index: 99;
	}

	.checkTable_con {
		padding: 30rpx;
		overflow: hidden;
	}

	.checkTable_con .u-th,
	.checkTable_con .u-td {
		flex: auto;
		height: 60rpx;
	}

	// 系统提示弹窗
	.materialCustom_box {
		background-color: #fff;
	}

	.customTit {
		font-size: 36rpx;
		font-weight: bold;
		color: $uni-color;
		text-align: center;
		overflow: hidden;
		margin: 40rpx 0;
	}

	.customInput {
		overflow: hidden;
		margin: 0 30rpx 40rpx;
	}

	.customInput .customTips {
		text-align: center;
	}

	.handlePost_con .completeBtn {
		margin-right: 20rpx;
	}

	.handlePost_con .completeBtn:last-child {
		margin-right: 0
	}
	.notice{
		padding: 10rpx 0;
		color: #2979ff;
		line-height: 44rpx;
	}
	
	
	
	//自定义表格
	.tableOutBox{
		background-color: #dae1e8;
		padding: 10rpx;
		box-sizing: border-box;
		width: 710rpx;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}
	
	.tableInBox{
		background-color: #fff;
		border-radius: 10rpx;
	}
	.tableTr{
		height: 80rpx;
		line-height: 80rpx;
		overflow: hidden;
		background-color: #f7fbfe;
		border-bottom: 2rpx solid #e2e2e2;
	}
	.tableTr:nth-child(2n){
		background-color: #ffff;
	}
	.tableTd{
		width: 20%;
		text-align: center;
		padding-left: 10rpx;
		float: left;
		font-size: 26rpx;
		font-weight: bold;
		border-right: 2rpx solid #e2e2e2;
	}
	.color1{
		color: #ff6600;
	}
	.color2{
		color: #35c700;
	}
</style>
